<template>
  <div>
    <div class="slot">
      <div class="top">
        <div class="return" @click="goback">
          <img src="@/assets/my/zuo.png" alt />
        </div>
        <span>我的下级</span>
      </div>
    </div>
    <div class="main">
      <div class="main_center">
        <div class="top_title">
          <div :class="active == 1 ? 'li1' : 'li'" @click="changeactive(1)">
            <div class="p1">一级下级</div>
            <span class="span"></span>
          </div>
          <div :class="active == 2 ? 'li1' : 'li'" @click="changeactive(2)">
            <div class="p1">二级下级</div>
            <span class="span"></span>
          </div>
        </div>
        <div class="center" v-show="active == 1">
          <div class="main1" v-show="onelist.lenght !== 0">
            <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
            <van-list
              :finished="finished"
              @load="onLoad"
              v-model="loading"
              finished-text="暂无数据了~"
              :immediate-check="false"
            >
              <div class="li2" v-for="item in onelist" :key="item.store_id">
                <div class="left">
                  <img :src="item.avatar" alt />
                  <div class="info">
                    <span class="top1">{{ item.name }}</span>
                  </div>
                </div>
                <div class="right">{{ item.add_time }}</div>
              </div>
            </van-list>
            <!-- </van-pull-refresh> -->
          </div>
          <!-- <div class="main2" v-show="onelist.lenght != 0">暂无下级~</div> -->
        </div>
        <div class="center" v-show="active == 2">
          <div class="main1" v-show="onelist.lenght !== 0">
            <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
            <van-list
              :finished="finished"
              @load="onLoad"
              v-model="loading"
              finished-text="暂无数据了~"
              :immediate-check="false"
            >
              <div class="li2" v-for="item in onelist" :key="item.store_id">
                <div class="left">
                  <img :src="item.avatar" alt />
                  <div class="info">
                    <span class="top1">{{ item.name }}</span>
                    <div class="shangji">
                      <div class="shj_btn">上级</div>
                      <div class="name">{{ item.parents }}</div>
                    </div>
                  </div>
                </div>
                <div class="right">{{ item.add_time }}</div>
              </div>
            </van-list>
            <!-- </van-pull-refresh> -->
          </div>
          <!-- <div class="main2" v-show="towlist.lenght != 0">暂无下级~</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      active: 1,
      onelist: [],
      towlist: [],
      token: "",
      loading: false, //是否在上拉加载
      isLoading: false, //是否在刷新
      finished: false, //是否加载完成
      page: 1,
    };
  },
  methods: {
    goback() {
      this.$router.back();
    },
    changeactive(active) {
      this.active = active;
      this.page = 1;
      this.finished = false;
      this.onelist = [];
      this.towlist = [];
      // if (this.active == 1) {
        this.getlist1();
      // } else {
      //   this.getlist2();
      // }
    },
    getlist1() {
      axios
        .post("/index/user/lower", this.$qs.stringify({
          token: this.token,
          level: this.active,
          page: 1,
        }))
        .then((res) => {
          if (res.data.code === 1) {
            this.onelist = res.data.data.data;
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
    // getlist2() {
    //   axios
    //     .post("/index/user/lower", {
    //       token: this.token,
    //       level: 2,
    //       page: 1,
    //     })
    //     .then((res) => {
    //       if (res.data.code === 1) {
    //         this.towlist = res.data.data.data;
    //       } else {
    //         this.$toast(res.data.msg);
    //       }
    //     });
    // },
    // // 下拉刷新
    // onRefresh() {
    //   this.page = 1;
    //   this.finished = false;
    //   this.onelist=[]
    //   this.towlist=[]
    //   if (this.active == 1) {
    //     this.getlist1();
    //   } else {
    //     this.getlist2();
    //   }
    // },
    // 上拉加载
    onLoad() {
      console.log("load", "");

      this.page++;
      // if (this.active == 1) {
        axios
          .post("/index/user/lower", this.$qs.stringify({
            token: this.token,
            level: this.active,
            page: this.page,
          }))
          .then((res) => {
            if (res.data.code === 1) {
              this.onelist = this.onelist.concat(res.data.data.data);
              // 加载状态结束
              this.loading = false;
              if (this.onelist.length >= res.data.data.total) {
                this.finished = true;
              }
            } else {
              this.$toast(res.data.msg);
            }
          });
      // } else {
      //   axios
      //     .post("/index/user/lower", {
      //       token: this.token,
      //       level: 2,
      //       page: this.page,
      //     })
      //     .then((res) => {
      //       if (res.data.code === 1) {
      //         this.towlist = this.towlist.concat(res.data.data.data);
      //         // 加载状态结束
      //         this.loading = false;
      //         if (this.towlist.length == res.data.data.total) {
      //           this.finished = true;
      //         }
      //       } else {
      //         this.$toast(res.data.msg);
      //       }
      //     });
      // }
      console.log("onelist", this.onelist);
      console.log("towlist", this.towlist);
    },
  },
  mounted() {
    this.token = window.localStorage.getItem("token");
    this.getlist1();
  },
};
</script>

<style lang="scss" scoped>
.slot {
  width: 100%;
  height: 44px;
  .top {
    width: 100%;
    height: 44px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    .return {
      width: 38px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      align-items: center;
      img {
        width: 8px;
        height: 15px;
      }
    }
    span {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      line-height: 44px;
    }
  }
}
.main {
  width: 100%;
  margin-top: 10px;
  .main_center {
    width: 100%;
    background: white;
    .top_title {
      width: 100%;
      height: 45px;
      background: #ffffff;
      display: flex;
      display: -webkit-flex;
      border-bottom: 1px solid #f8f8f8;
      position: fixed;
      top: 44px;
      left: 0;
      z-index: 6;
      .li {
        width: 50%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        .p1 {
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #888888;
          line-height: 15px;
        }
      }
      .li1 {
        width: 50%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        .p1 {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          line-height: 18px;
        }
        .span {
          width: 28px;
          height: 4px;
          background: #fdd40a;
          border-radius: 2px;
          position: absolute;
          bottom: 0;
        }
      }
    }
    .center {
      width: 100%;
      background: white;
      margin-top: 45px;
      .main1 {
        width: 345px;
        margin: auto;
        .li2 {
          width: 100%;
          height: 75px;
          border-bottom: 1px solid #f8f8f8;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          justify-content: space-between;
          .left {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            img {
              width: 35px;
              height: 35px;
              margin-right: 10px;
              border-radius: 50%;
            }
            .info {
              display: flex;
              display: -webkit-flex;
              flex-direction: column;
              align-items: flex-start;
              .top1 {
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #222222;
                line-height: 16px;
              }
              .shangji {
                display: flex;
                display: -webkit-flex;
                align-items: center;
                margin-top: 10px;
                .shj_btn {
                  width: 31px;
                  height: 15px;
                  background: #4c78fa;
                  border-radius: 3px;
                  font-size: 11px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #ffffff;
                  line-height: 15px;
                  text-align: center;
                }
                .name {
                  margin-left: 6px;
                  font-size: 12px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #565656;
                  line-height: 12px;
                }
              }
            }
          }
          .right {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #bcbcbc;
            line-height: 12px;
          }
        }
      }
      .main2 {
        width: 100%;
        height: 50px;
        background: white;
        line-height: 50px;
        font-size: 14px;
        text-align: center;
      }
    }
  }
}
</style>